<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>绑定QQ</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.2/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12" style="margin-top: 200px">
            <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">社会化登录</h3></div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>Provider</th>
                            <th>Connected</th>
                            <th>DisplayName</th>
                            <th>Options</th>
                        </tr>
                        <tr th:each="conn : ${connections}">
                            <td th:text="${conn.provider}"></td>
                            <td th:text="${conn.connected}"></td>
                            <td th:text="${conn.displayName}"></td>
                            <td th:if="${!conn.connected}">
                                <form th:action="'/connect/'+ ${conn.provider}" method="POST">
                                    <button type="submit" class="btn btn-default btn-xs">
                                        Connect
                                    </button>
                                </form>
                            </td>
                            <td th:if="${conn.connected}">
                                <form th:action="'/connect/'+ ${conn.provider}" method="POST">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit" class="btn btn-default btn-xs">
                                        Disconnect
                                    </button>
                                </form>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
